import {Component, OnInit} from '@angular/core';
import {Hero} from "../Hero";
// import {HEROES} from "../mock-heroes";
import {HeroService} from "../hero.service";

@Component({
  selector: 'app-heroes', //组件的 CSS 元素选择器
  templateUrl: './heroes.component.html', //组件模板文件的位置。
  styleUrls: ['./heroes.component.css'] //组件私有 CSS 样式表文件的位置
})
export class HeroesComponent implements OnInit {

  ngOnInit(): void {
    this.getHeroes()
  }

  // heroes = HEROES
  heroes: Hero[] = []

  // ?是安全检查，在访问变量之前检查他是否有定义
  // selectedHero?: Hero

  // 定义一个hero属性的类型，重构为 Hero
  //   hero: Hero = {
  //     id: 1,
  //     name: "王二麻子"
  //   };


// 声明了一个私有 heroService 属性，同时把它标记为一个 HeroService 的注入点。
// 当 Angular 创建 HeroesComponent 时，依赖注入系统就会把这个 heroService 参数设置为 HeroService 的单例对象
  constructor(private heroService: HeroService) {

  }

  /**
   * 异步订阅   Observable.subscribe()
   * 等待 Observable 发出这个英雄数组，这可能立即发生，也可能会在几分钟之后
   * 然后，subscribe() 方法把这个英雄数组传给这个回调函数，该函数把英雄数组赋值给组件的 heroes 属性
   */
  getHeroes(): void {
    // Observable.subscribe()
    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes)
  }

  /**
   * 当指定的名字非空时，这个处理器会用这个名字创建一个类似于 Hero 的对象（只缺少 id 属性）
   * 并把它传给服务的 addHero() 方法。
   *
   * 当 addHero() 保存成功时
   * subscribe() 的回调函数会收到这个新英雄，并把它追加到 heroes 列表中以供显示。
   * @param name
   */
  add(name: string): void {
    name = name.trim();
    if (!name) { return; }
    this.heroService.addHero({ name } as Hero)
      .subscribe(hero => {
        this.heroes.push(hero);
      });
  }

  /**
   * 这个组件把删除英雄的逻辑委托给了 HeroService
   * 但仍保留了更新它自己的英雄列表的职责
   * 组件的 delete() 方法会在 HeroService 对服务器的操作成功之前 先从列表中移除要删除的英雄。
   *
   * 组件与 heroService.deleteHero() 返回的 Observable 还完全没有关联。必须订阅它。
   * @param hero
   */
  delete(hero: Hero): void {
    this.heroes = this.heroes.filter(h => h !== hero);
    this.heroService.deleteHero(hero.id).subscribe();
  }

  // onSelect(hero: Hero): void {
  //   this.selectedHero = hero
  // }


  // getHeroes():void{
  //
  //   this.heroes = this.heroService.getHeroes()
  // }


}
